<template>
  <BlueBackground :title="'安全中心'">
    <div class="safe-box">
      <div class="cell-box">
        <van-cell title="修改密码" is-link @click="amend = true" />
        <van-cell title="注销账号" is-link @click="logout" />
      </div>
      <div class="leave">
        <van-button
          type="primary"
          size="large"
          round
          color="rgb(12,52,186)"
          @click="out"
          >退出登录</van-button
        >
      </div>

      <van-action-sheet v-model="amend" title="修改密码">
        <div class="content">
          <van-form @submit="onSubmit">
            <van-field
              v-model="password"
              name="oldPassword"
              label="旧密码"
              placeholder="旧密码"
              :type="isHidden ? 'text' : 'password'"
              :right-icon="isHidden ? 'eye-o' : 'closed-eye'"
              @click-right-icon="isPassword"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: /^[A-Za-z]\w{5,15}$/,
                },
              ]"
            />
            <van-field
              v-model="password2"
              name="newPassword"
              label="新密码"
              placeholder="新密码"
              :type="isHidden2 ? 'text' : 'password'"
              :right-icon="isHidden2 ? 'eye-o' : 'closed-eye'"
              @click-right-icon="isPassword2"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: /^[A-Za-z]\w{5,15}$/,
                },
              ]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </van-action-sheet>
    </div>
  </BlueBackground>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import BlueBackground from "../components/BlueBackground.vue";
export default {
  name: "Safe",
  data() {
    return {
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      amend: false,
      password: "",
      password2: "",
      isHidden: false,
      isHidden2: false,
    };
  },
  methods: {
    onSubmit(values) {
      let appkey = this.appkey;
      let tokenString = this.tokenString;
      let oldPassword = this.password;
      let password = this.password2;
      let data = `appkey=${appkey}&tokenString=${tokenString}&oldPassword=${oldPassword}&password=${password}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updatePassword",
        data,
      })
        .then((res) => {
          if (res.data.code === "E003") {
            Toast.fail(res.data.msg);
            this.password = "";
            this.password2 = "";
            this.amend = false;
          } else if (res.data.code === "E001") {
            Toast.success(res.data.msg);
            this.password = "";
            this.password2 = "";
            sessionStorage.clear();
            this.amend = false;
            this.$router.push({ name: "Login" });
          } else {
            Toast.fail("账号验证无效，请重新登录");
            this.amend = false;
            sessionStorage.clear();
          }
        })
        .catch((err) => {});
    },
    isPassword() {
      this.isHidden = !this.isHidden;
    },
    isPassword2() {
      this.isHidden2 = !this.isHidden2;
    },
    logout() {
      Dialog.confirm({
        title: "注销账号",
        message: "是否确认注销，一旦注销无法恢复",
      })
        .then(() => {
          let appkey = this.appkey;
          let tokenString = this.tokenString;
          let data = `appkey=${appkey}&tokenString=${tokenString}`;
          this.axios({
            method: "post",
            url: "http://www.kangliuyong.com:10002/destroyAccount",
            data,
          })
            .then((res) => {
              sessionStorage.clear();
              Toast.success("注销成功");
              this.$router.push({ name: "Login" });
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    out() {
      let appkey = this.appkey;
      let tokenString = this.tokenString;
      let data = `appkey=${appkey}&tokenString=${tokenString}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/logout",
        data,
      })
        .then((res) => {
          if (res.data.code === "F001") {
            sessionStorage.clear();
            Toast.success("退出登录成功");
            this.$router.push({ name: "Login" });
          } else {
            this.$router.push({ name: "Login" });
          }
        })
        .catch((err) => {});
    },
  },
  components: {
    BlueBackground,
  },
};
</script>

<style lang="less" scoped>
.safe-box {
  width: 90%;
  margin: 0 auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  .cell-box {
    padding: 20px 0 10px;
    background-color: #fff;
  }
  .leave {
    margin-top: 100px;
  }
}
.content {
  padding: 16px 16px 160px;
}
</style>